<template>
  <el-dialog title="新增角色" :visible.sync="boxShow.isShow" @closed="reset">
    <el-form :model="roleForm" ref="roleForm">
      <el-form-item label="角色名称" :label-width="formLabelWidth">
        <el-input v-model="roleForm.rolename" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="角色权限" :label-width="formLabelWidth">
        <el-tree
          :data="menuList"
          show-checkbox
          node-key="id"
          :default-expanded-keys="[2, 3]"
          :default-checked-keys="[5]"
          :props="defaultProps"
        >
        </el-tree>
      </el-form-item>

      <el-form-item label="角色状态" :label-width="formLabelWidth">
        <template>
          <el-radio v-model="roleForm.status" :label="1">启用</el-radio>
          <el-radio v-model="roleForm.status" :label="2">禁用</el-radio>
        </template>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="reset">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  /*
    beforeCreate()      -- 实例
    created()           -- 实例
    beforeMounted()     -- 虚拟DOM
    mounted()           -- 虚拟DOM
    beforeUpdate()      -- 实例数据
    updated()           -- 实例数据
    beforeDestory()     -- 实例
    destoryed()         -- 实例
    ------
    activated()  -- 缓存 keep-alive 激活
    deactivated()  -- 缓存 keep-alive 失活

    */
  props: ["boxShow"],
  computed: {
    ...mapState("menus", ["menuList"]),
  },
  mounted() {
    // let checks = this.roleForm.menus.split(",")
    // this.$refs.tree.setCheckedKeys(checks)
    console.log(this.$refs.mydiv, "mounted=>this.$refs.tree");
    console.log(document.querySelector("#mydiv"), "querySelector('#mydiv')");
  },
  watch: {
    boxShow: {
      handler(obj) {
        console.log(this.roleForm.menus, "角色编辑的菜单");
        if (obj.isShow) {
          // 窗口打开
          if (this.roleForm.menus !== "") {
            setTimeout(() => {
              let checks = this.roleForm.menus.split(",");
              this.$refs.tree.setCheckedKeys(checks)
            });

            // 存在一个什么样的BUG？导致第一次出现错误
            // 后面每次加载都正常？
          }
        }
      },
      deep: true,
    },
  },
  data() {
    return {
      roleForm: {
        id: "",
        rolename: "",
        menus: "",
        status: 1,
      },
      formLabelWidth: "120px",
      defaultProps: {
        children: "children",
        label: "title",
      },
    };
  },
  methods: {
    ...mapActions("roles", ["addRoleListActions", "editRoleListActions"]),
    submit() {
      //  获取选择的菜单
      this.roleForm.menus = this.$refs.tree.getCheckedKeys().join(",")
      if (this.roleForm.id) {
        // 编辑
        this.editRoleListActions(this.roleForm);
      } else {
        // 添加角色
        this.addRoleListActions(this.roleForm);
      }
      this.reset();
    },
    reset() {
      (this.roleForm = {
        id: "",
        rolename: "",
        menus: "",
        status: 1,
      }),
      this.$refs.tree.setCheckedKeys([])
      this.boxShow.isShow = false;
    },
  },
};
</script>

<style scoped>
.el-main {
  text-align: left;
}
</style>